<template>
  <div class="components-container">
    <el-dialog
      :visible.sync="generatorDialogVisible"
      :width="dialogWidth"
      :fullscreen="dialogfullscreen"
      :before-close="handleClose"
      :show-close="false"
      :top="dialogTop"
    >
      <div slot="title">
        <div style="float:left;">代码生成</div>
        <div style="float:right;">
          <el-tooltip v-if="dialogTopisbig" class="item" effect="dark" content="缩小一下" placement="top-start">
            <i class="el-icon-zoom-out icon_pointer" @click="reduceDialog" />
          </el-tooltip>
          <el-tooltip v-if="!dialogTopisbig" class="item" effect="dark" content="大一点的展示" placement="top-start">
            <i class="el-icon-zoom-in icon_pointer" @click="extendDialog" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="退出" placement="top-start">
            <i class="el-icon-close icon_pointer" @click="generatorDialogVisible=false;" />
          </el-tooltip>
        </div>
      </div>
      <el-tabs v-model="TabsValue" type="card" @tab-click="TabsClick">
        <el-tab-pane
          v-for="(item, index) in tableTabs"
          :key="index"
          :label="item.title"
          :name="item.name"
        />
      </el-tabs>
      <MonacoEditor
        :key="randomkey"
        v-loading="eitorloading"
        element-loading-text="拼命生成代码中"
        :height="editor_height"
        :width="editor_width"
        :code="code"
        :editor-options="options"
        :language="melang"
        @mounted="onMounted"
        @codeChange="onCodeChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="generatorDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="generatorDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="historyDialogVisible"
      :width="dialogWidth"
      :fullscreen="dialogfullscreen"
      :before-close="handleClose"
      :show-close="false"
      :top="dialogTop"
    >
      <div slot="title">
        <div style="float:left;">历史生成字段</div>
        <div style="float:right;">
          <el-tooltip v-if="dialogTopisbig" class="item" effect="dark" content="缩小一下" placement="top-start">
            <i class="el-icon-zoom-out icon_pointer" @click="reduceDialog" />
          </el-tooltip>
          <el-tooltip v-if="!dialogTopisbig" class="item" effect="dark" content="大一点的展示" placement="top-start">
            <i class="el-icon-zoom-in icon_pointer" @click="extendDialog" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="退出" placement="top-start">
            <i class="el-icon-close icon_pointer" @click="historyDialogVisible=false;" />
          </el-tooltip>
        </div>
        <div>
          <vxe-toolbar>
            <template #buttons />
          </vxe-toolbar>
          <vxe-table
            border
            resizable
            highlight-hover-row
            show-overflow
            :align="allAlign"
            :data="historyColumnTableData"
          >
            <vxe-column title="id" field="id" />
            <vxe-column title="表名" field="tableName" />
            <vxe-column title="创建时间" field="createdTime" />
            <vxe-column title="字段集合" field="columns" />
            <vxe-column title="操作" field="operation" />
            <vxe-column title="操作">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  circle
                  @click="importColumn(row)"
                />
              </template>
            </vxe-column>
          </vxe-table>
          <vxe-pager
            :loading="loading"
            :current-page="pageInfo.page"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.totalResult"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
            @page-change="handlePageChange"
          />
        </div>
      </div>
    </el-dialog>
    <el-card>
      <vxe-toolbar>
        <template #buttons>
          <vxe-input v-model="QBootColumnSet.tableName" type="text" placeholder="请输入表名(英文)" />
          <vxe-button @click="addColumn()">增加字段</vxe-button>
          <vxe-button @click="getList()">历史字段加载</vxe-button>
          <vxe-button @click="openDialog()">生成代码</vxe-button>
          <vxe-button @keyup.ctrl.c="saveTableTemplate()" @click="saveTableTemplate()">保存数据表</vxe-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="xGrid"
        border
        resizable
        show-overflow
        height="100%"
        :data="QBootColumnSet.qbootColumns"
        :edit-config="{trigger: 'click', mode: 'cell'}"
      >
        <vxe-column type="seq" width="60" />
        <vxe-column field="columnName" title="字段英文名" :edit-render="{autofocus: '.vxe-input--inner'}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnName" type="text" placeholder="请输入英文名" />
          </template>
        </vxe-column>
        <vxe-column field="columnNameZh" title="字段中文名" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnNameZh" type="text" placeholder="请输入中文名" />
          </template>
        </vxe-column>
        <vxe-column field="columnLength" title="字段长度" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnLength" type="text" placeholder="请输入中文名" />
          </template>
        </vxe-column>
        <vxe-column field="columnType" title="字段类型" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-select v-model="row.columnType" placeholder="字符串类型" size="medium">
              <vxe-option v-for="(item,index) in columnTypeList" :key="index" :value="item.value" :label="item.label" />
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="columnDescription" title="字段描述" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.columnDescription" type="text" placeholder="请输入字段描述" />
          </template>
        </vxe-column>
        <vxe-column field="isNullable" title="是否可以为空" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-switch v-model="row.isNullable" open-label="是" close-label="否" />
          </template>
          <template #default="{ row }">
            <vxe-switch v-model="row.isNullable" open-label="是" close-label="否" />
          </template>
        </vxe-column>
        <vxe-column field="isSearchable" title="是否可以被搜索" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-switch v-model="row.isSearchable" open-label="是" close-label="否" />
          </template>
          <template #default="{ row }">
            <vxe-switch v-model="row.isSearchable" open-label="是" close-label="否" />
          </template>
        </vxe-column>
        <vxe-column field="isUnique" title="是否单独唯一" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-switch v-model="row.isUnique" open-label="是" close-label="否" />
          </template>
          <template #default="{ row }">
            <vxe-switch v-model="row.isUnique" open-label="是" close-label="否" />
          </template>
        </vxe-column>
        <vxe-column title="操作">
          <template #default="{ row }">
            <el-button type="danger" icon="el-icon-delete" circle @click="removeColumn(row)" />
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>

<script>
import { getTableTemplate, getAllColumnSet, getEntityTemplate, saveTableTemplate, getDAOTemplate, getTableApiTemplate, getApiControllerTemplate, getApiServiceTemplate } from '@/api/code-generator'
import MonacoEditor from 'vue-monaco-editor'
export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      allAlign: 'left',
      loading: false,
      // 历史加载对话框
      historyDialogVisible: false,
      historyColumnTableData: [],
      pageInfo: {
        page: 1,
        pageSize: 7,
        totalResult: 0
      },
      // 代码生成对话框属性
      eitorloading: false,
      generatorDialogVisible: false,
      dialogfullscreen: false,
      dialogWidth: '45%',
      dialogTop: '15vh',
      dialogTopisbig: false,
      // 当前代码生成编号
      TabsValue: 'vue表格',
      tableTabs: [{
        title: 'index.vue',
        name: 'vue表格'
      },
      {
        title: 'api.js',
        name: 'API接口'
      },
      {
        title: '.java',
        name: 'Java实体类'
      },
      {
        title: '.java',
        name: 'DAO接口'
      },
      {
        title: '.java',
        name: 'Service接口'
      },
      {
        title: '.java',
        name: 'API控制器'
      }
      ],
      // 编辑器属性
      melang: 'html',
      editor_width: '100%',
      editor_height: '600',
      editor: null,
      code: '',
      options: {
        selectOnLineNumbers: false
      },
      randomkey: 1231231,
      msg: '代码生成',
      // 表格属性
      columnTypeList: [
        { label: '字符串类型', value: 'String' },
        { label: '数字类型', value: 'Number' },
        { label: '日期类型', value: 'Date' },
        { label: '布尔类型', value: 'Boolean' }
      ],
      QBootColumnSet: {
        tableName: 'QBootTable',
        qbootColumns: []
      }
    }
  },
  methods: {
    onMounted(editor) {
      this.editor = editor
    },
    onCodeChange(editor) {
      console.log(this.editor.getValue())
    },
    createRamdomKey() {
      return Math.floor(Math.random() * (10, 1000000012313))
    },
    openDialog() {
      this.generatorDialogVisible = true
      this.tableTabs[0].title = this.QBootColumnSet.tableName + '.vue'
      this.tableTabs[1].title = this.QBootColumnSet.tableName + '-api.js'
      this.tableTabs[2].title = this.QBootColumnSet.tableName + '.java'
      this.tableTabs[3].title = this.QBootColumnSet.tableName + 'Repository' + '.java'
      this.tableTabs[4].title = this.QBootColumnSet.tableName + 'ServiceImpl' + '.java'
      this.tableTabs[5].title = this.QBootColumnSet.tableName + 'Controller' + '.java'
      this.getTemplate()
    },
    saveTableTemplate() {
      saveTableTemplate(this.QBootColumnSet).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      })
    },
    getTemplate() {
      this.eitorloading = true
      switch (this.TabsValue) {
        case 'vue表格':
          this.getTableTemplate()
          break
        case 'API接口':
          this.getTableApiTemplate()
          break
        case 'Java实体类':
          this.getEntityTemplate()
          break
        case 'DAO接口':
          this.getDAOTemplate()
          break
        case 'API控制器':
          this.getApiControllerTemplate()
          break
        case 'Service接口':
          this.getApiServiceTemplate()
          break
      }
    },
    getDetail() {
      this.$nextTick((res) => {
        this.code = res.sourceFormula
        this.randomkey = this.createRamdomKey()
      })
    },
    getTableTemplate() {
      const that = this
      getTableTemplate(this.QBootColumnSet).then(res => {
        that.code = res.data
        that.melang = 'html'
        that.randomkey = that.createRamdomKey()
        this.eitorloading = false
      })
    },
    getEntityTemplate() {
      const that = this
      getEntityTemplate(this.QBootColumnSet).then(res => {
        that.code = res.data
        that.melang = 'java'
        that.randomkey = that.createRamdomKey()
        this.eitorloading = false
      })
    },
    getDAOTemplate() {
      const that = this
      getDAOTemplate(this.QBootColumnSet).then(res => {
        that.code = res.data
        that.melang = 'java'
        that.randomkey = that.createRamdomKey()
        this.eitorloading = false
      })
    },
    getApiControllerTemplate() {
      const that = this
      getApiControllerTemplate(this.QBootColumnSet).then(res => {
        that.code = res.data
        that.melang = 'java'
        that.randomkey = that.createRamdomKey()
        this.eitorloading = false
      })
    },
    getTableApiTemplate() {
      const that = this
      getTableApiTemplate(this.QBootColumnSet).then(res => {
        that.code = res.data
        that.melang = 'javascript'
        that.randomkey = that.createRamdomKey()
        this.eitorloading = false
      })
    },
    getApiServiceTemplate() {
      const that = this
      getApiServiceTemplate(this.QBootColumnSet).then(res => {
        that.code = res.data
        that.melang = 'java'
        that.randomkey = that.createRamdomKey()
        this.eitorloading = false
      })
    },
    inputChange(content) {
      this.$nextTick(() => {
        console.log('code:' + this.code)
        console.log('content:' + content)
      })
    },
    extendDialog() {
      this.editor_width = '100%'
      this.editor_height = '700'
      this.dialogWidth = '70%'
      this.dialogTop = '5vh'
      this.randomkey = this.createRamdomKey()
      this.dialogTopisbig = true
    },
    reduceDialog() {
      this.editor_width = '100%'
      this.editor_height = '600'
      this.dialogWidth = '45%'
      this.dialogTop = '15vh'
      this.randomkey = this.createRamdomKey()
      this.dialogTopisbig = false
    },
    addColumn() {
      this.QBootColumnSet.qbootColumns.push({
        columnName: 'ColumnName' + this.createRamdomKey(),
        columnType: 'String',
        columnLength: 255,
        columnNameZh: '字段名',
        columnDescription: '描述',
        isNullable: true,
        isSearchable: true,
        isUnique: true
      })
    },
    getList() {
      this.historyDialogVisible = true
      this.getHistoryList()
    },
    getHistoryList() {
      getAllColumnSet(this.pageInfo.page - 1, this.pageInfo.pageSize).then(res => {
        this.historyColumnTableData = res.data.content
        this.pageInfo.totalResult = res.data.totalElements
        this.historyColumnTableData.forEach(item => {
          item.columns = ''
          item.qbootColumns.forEach(item2 => {
            item.columns = item.columns + item2.columnName + ','
          })
        })
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.pageInfo.page = currentPage
      this.pageInfo.pageSize = pageSize
      this.getHistoryList()
    },
    importColumn(row) {
      this.QBootColumnSet.qbootColumns = row.qbootColumns
      this.$message.success('导入成功')
      this.QBootColumnSet.qbootColumns.forEach(item => {
        item.id = ''
      })
    },
    removeColumn(row) {
      this.QBootColumnSet.qbootColumns.splice(this.QBootColumnSet.qbootColumns.indexOf(row), 1)
    },
    handleClose() {

    },
    TabsClick() {
      this.getTemplate()
    }
  }
}
</script>

<style lang="scss" scoped>
.icon_pointer{
  margin-right: 10px;
  &:hover{
    cursor: pointer;
  }
}
</style>>
